<template>
  <div class="clearfix table-out search">
    <el-dialog v-model="dialogVisible" title="颁奖" width="800">
      <el-table :data="tableDataDialog" style="width: 100%" ref="tableRef">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="jxName" label="奖项" width="180" />
        <el-table-column prop="jpCount" label="总数量" width="180" />
        <el-table-column prop="yibf" label="已颁发" />
        <el-table-column prop="shengy" label="剩余" />
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="banj"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>

    <el-button
      type="primary"
      plain
      size="small"
      class="return pointer"
      @click="returnGo"
      ><i class="iconfont icon-fanhui"></i> 返回
    </el-button>
    <div class="clearfix top-return search-pub">
      <el-form :model="formData" label-width="auto">
        <el-select
          @change="getData"
          class="fxl margin10R"
          style="width: 240px"
          :placeholder="`请选择作品状态`"
          v-model="formData.zuopzt"
        >
          <el-option
            v-for="item in zuopztlb"
            :key="item.itemValue"
            :label="item.itemText"
            :value="item.itemValue"
          >
          </el-option>
        </el-select>

        <!-- 动态搜素条件 -->
        <el-form-item class="fxl" v-for="(item, idx) in soustjList" :key="idx">
          <el-input
            style="width: 240px"
            clearable
            @change="getData"
            class="fxl margin10R pub-inp-wid"
            :placeholder="`请选择${item.biaot}`"
            v-model="formData[item.zidmc]"
            v-if="item.biaodkjlx == '1'"
          />
          <el-select
            @change="getData"
            class="fxl margin10R"
            style="width: 200px"
            :placeholder="`请选择${item.biaot}`"
            v-if="item.biaodkjlx == '2'"
            v-model="formData[item.zidmc]"
          >
            <el-option
              v-for="item2 in item.kongjsj.split(';')"
              :label="item2.split(',')[0]"
              :value="item2.split(',')[1]"
            >
            </el-option>
          </el-select>
          <el-cascader
            class="fxl margin10R"
            clearable
            style="width: 230px"
            v-if="item.biaodkjlx == '3'"
            @change="cascaderChangeData($event, item.zidmc)"
            :show-all-levels="true"
            :placeholder="`请选择${item.biaot}`"
            :props="props"
            v-model="formData[item.zidmc]"
            :options="cascaderData[item.zidmc]"
          ></el-cascader>
        </el-form-item>
        <el-button class="fxl" type="primary" @click="getData()"
          >查询</el-button
        >
        <el-button class="fxl" type="primary" @click="reset">重置</el-button>
      </el-form>
    </div>
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      empty-text=" "
      class="tablePub top-return"
      :row-class-name="tableRowClassName"
    >
      <!-- <el-table-column prop="no" label="序号" width="80" align="center">
        <template #default="scope">
          <p>{{ scope.$index + 1 }}</p>
        </template>
      </el-table-column> -->
      <el-table-column label="序号" type="index" :index="getIndex" width="70" />

      <el-table-column
        prop="saisjcid_dictText"
        label="赛事进程"
        width="120"
      ></el-table-column>

      <el-table-column
        prop="saisqyId_dictText"
        label="赛区"
        width="120"
      ></el-table-column>

      <el-table-column
        :prop="item.zidmc"
        :label="item.biaot"
        v-for="(item, idx) in tableHeader"
        :key="idx"
        :width="item.width"
        align="center"
      >
      </el-table-column>

      <el-table-column
        prop="pingjf"
        label="平均分"
      ></el-table-column>

      <el-table-column
        prop="fuhf"
        label="复核分"
      ></el-table-column>

      <el-table-column prop="oper" label="操作" width="180" align="center">
        <template #default="scope">
          <el-button
            type="danger"
            size="small"
            @click="oper(scope.$index, scope.row)"
            >复核</el-button
          >
          <!--          <el-button type="success" size="small" @click="showBanjDlg(scope.row)"-->
          <!--            >颁奖</el-button-->
          <!--          >-->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="pageNo"
      v-model:page-size="pageSize"
      @current-change="handleCurrentChange"
      small
      background
      layout="total, prev, pager, next"
      :total="total"
      class="pagination fxr"
    />
    <form-data-pdf
      v-show="pdfStatic"
      :pdfTitle="pdfTitle"
      :pdf-title-sub="pdfTitleSub"
      :form-data="pdfData"
      ref="formDataPdfRef"
    ></form-data-pdf>
  </div>
</template>

<script>
import pubJs from "./pub";
import axios from "axios";

export default {
  mixins: [pubJs],
  data() {
    return {
      saisId: null,
      saisjcId:null,
      zuopztlb: [],
      selectedZuopId: null,
      tableData: [],
      tableDataDialog: [],
      dialogVisible: false,
      formData: {},
      soustjList: [],
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      tableHeader: [],
      pdfData: [],
      pdfStatic: false,
    };
  },

  inject: ["imageUrl", "serviceUrl"],

  async mounted() {
    this.pdfStatic = false;
    this.saisId = this.$route.query.saisId;
    this.saisjcId = this.$route.query.saisjcId
    await this.getDongtsstjlb(this.saisId);
    this.getTableHeader();
    this.getDictItem();
    this.formData.isFuh = "1";
    if (this.searchFormData && Object.keys(this.searchFormData).length != 0) {
      this.formData.zuopzt = this.searchFormData.zuopzt?this.searchFormData.zuopzt:''
      this.formData.pingszt = this.searchFormData.pingszt? this.searchFormData.pingszt: "";
    }
    setTimeout(()=>{
      this.getData(this.pageNo);
    },200)
  },

  methods: {
    getTableHeader() {
      let that = this;
      that.tableHeader = [];
      axios
        .get(that.serviceUrl + "/saisjczd2/cbda2Saisjczd/getWodzpzd", {
          headers: {
            "X-Access-Token": localStorage.getItem("token"),
          },
          params: {
            cansrsf: that.userInfo.cansrsf,
            saisId: that.saisId,
            _t: new Date().getTime(),
          },
        })
        .then((resp) => {
          resp.data.result.forEach((item, index) => {
            console.log(item);
            that.tableHeader.push({
              ...item,
              width:
                item.zidmc == "create_time"
                  ? 200
                  : item.zidmc == "zuopzt"
                  ? 260
                  : "",
            });
          });
        })
        .catch((error) => {
          //console.log(error);
        });
    },
    // 作品状态
    getDictItem() {
      let that = this;
      axios
        .get(that.serviceUrl + "/sys/dictItem/list", {
          headers: {
            "X-Access-Token": localStorage.getItem("token"),
          },
          params: {
            dictId: "1771189879043608578",
            _t: new Date().getTime(),
          },
        })
        .then((resp) => {
          that.zuopztlb = resp.data.result.records;
        })
        .catch((error) => {
          //console.log(error);
        });
    },
    banj() {
      let that = this;

      // console.log(tableRef);
      axios
        .post(
          that.serviceUrl + "/banjjg2/cdba2Banjjg/add",
          {
            jiangxId: 1,
            zuopId: that.selectedZuopId,
          },
          {
            headers: {
              "X-Access-Token": localStorage.getItem("token"),
            },
          }
        )
        .then((resp) => {
          if (resp.data.code == 200) {
            this.$message.success("颁奖成功");
            this.dialogVisible = false;
          } else this.$message.error(resp.data.message);
        })
        .catch((error) => {
          //console.log(error);
        });
    },

    showBanjDlg(row) {
      let that = this;

      var arr = JSON.parse(row.saiq);
      // 获取最后一个元素
      var saisqyId = arr[arr.length - 1];
      console.log(saisqyId); // 输出最后一个元素

      axios
        .get(that.serviceUrl + "/saisjx/cbda2Saisjx/list", {
          headers: {
            "X-Access-Token": localStorage.getItem("token"),
          },
          params: {
            _t: new Date().getTime(),
          },
        })
        .then((resp) => {
          that.tableDataDialog = resp.data.result.records;
          that.dialogVisible = true;
          that.selectedZuopId = row.id;
        })
        .catch((error) => {
          //console.log(error);
        });
    },

    // handleCurrentChange(_pageNo) {
    //   this.formData.pageNo = _pageNo;
    //   this.getData(1);
    // },

    returnGo() {
      this.$router.go(-1); // 返回上一个页面
    },

    reset() {
      this.formData = {
        isFuh: 1,
        saisId: this.saisId,
        saisjc_id:this.saisjcId,
        zuopbt: null,
        zuopzt: null,
      };
      this.pageNo = 1
      this.getData();
    },

    getData(v) {
      let that = this;
      this.tableLoading = true;
      that.formData.saisId = that.saisId;
      that.formData.saisjc_id = that.saisjcId;
      that.formData.pageNo = that.pageNo;
      that.formData.pageSize = that.pageSize;
      console.log(this.formData,'************');
      axios
        .post(
          that.serviceUrl + "/saisjczd2/cbda2Saisjczd/zuoplieb",
          that.formData,
          {
            headers: {
              "X-Access-Token": localStorage.getItem("token"),
            },
          }
        )
        .then((resp) => {
          if (resp && resp.data.code == 200) {
            this.tableLoading = false;
            that.tableData = resp.data.result.records;
            that.total = resp.data.result.total;
          }
        })
        .catch((error) => {
          //console.log(error);
        });
    },

    oper(index, row) {
      localStorage.setItem("topStepId", row.saisjc_id);
      localStorage.setItem(
        "searchFormData",
        JSON.stringify({ ...this.formData, pageNo: this.pageNo })
      );
      this.$router.push({
        path: "fuh_detail",
        query: {
          id: row.id,
          saisId: row.sais_id,
          canszpId: row.canszp_id,
          saisjcId: row.saisjc_id,
          saisqyId: row.saisqy_id,
          fuhf:row.fuhf
        },
      });
    },
  },
};
</script>

<style scoped lang="less"></style>
